<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>
    
    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/detail.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 80px">
        <div class="container">
            <a href="#">
                <img :src="article.articlePic" width="100%" alt=""/>
            </a>
        </div>
    </section>
  
    <section class="mt-3">
      <div class="container">
          <div class="card" style="background-color: white;">
              <div class="card-body">
                <div class="text-center">
                  <h2 class="my-4">{{ article.articleName }}</h2>
                  <p>
                    <i class="bi bi-folder2-open opacity-50"></i>
                    <span class="card-text articleMsg">{{article.articleTypeEmp.typeName}}</span>
                    <i class="bi bi-tags opacity-50 ms-2"></i>
                    <span class="card-text articleMsg">{{ article.articleTag }}</span>
                    <i class="bi bi-alarm opacity-50  ms-2"></i>
                    <span class="card-text articleMsg">{{ article.createTime }}</span>
                    <a href="#" class="card-link articleMsg ms-2">
                      <i class="bi bi-hand-thumbs-up-fill opacity-50" @click="handleLikeClick(article.articleStarNum,article.articleId)"></i> {{ article.articleStarNum}}
                    </a>
                    <i class="bi bi-book-half opacity-50 ms-2"></i>
                    <span class="card-text articleMsg">{{article.articleReadCount}}</span>
                  </p>
                  <hr class="my-4"/>
                  <p class="text-start" v-html="article.articleContent">

                  </p>
                </div>
                <hr class="my-4"/>
                <div>
                  <h3>相关文章</h3>
                  <ul class="list-group list-group-flush mb-3">
                    <li v-for="v in aboutArticlelist" class="list-group-item" style="border: none;">&bull;
                      <a :href="'./blog-detail.html?id='+v.id" class="text-info article">{{ v.articleName }}</a>
                    </li>

                  </ul>


                  <div style="background-color: #fafbfc;">
                    <div class="d-flex">
                      <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                      <input class="form-control h-75 mt-3" v-model="comment" placeholder="请输入评论..."/>
                    </div>
                    <button type="button" @click="savasubmit" class="btn btn-primary" style="width: 100px;margin-left: 55px;">发表评论</button>
                  </div>

                  <hr/>

                  <div v-for="v in comments">
                    <div>
                      <div class="delBtn">
                        <i class="bi bi-trash3-fill" @click="deleteComment(v.id)"></i>
                      </div>
                      <div class="d-flex">
                        <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                        <div class="mt-1">
                          <span class="text-dark fw-bolder h6">游客: 
                            <span>{{v.id}}</span>
                          </span>
                          <br/>
                          <span>{{v.createTime}}</span>
                        </div>
                      </div>
                      <span style="margin-left: 55px;">{{v.content}}</span>
                      <hr class="my-2"/>
                    </div>  
                  </div>
                  <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                    d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
                  <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                    <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                      但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                    </p>
                    <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px"/>
                  </div>
                </div>
              </div>
            </div>
      </div>
    </section>
  </div>

  <script>
    new Vue({
      el:"#app",
      data() {
        return {
            // 可以在 data 中定义一个变量来保存当前点赞状态
            isLiked: false,
            articleStarNumber: {
                "articleStarNum": 0, // 文章点赞数
            },
            article:{},
            aboutArticlelist:[],
            comment:"",//
            comments:[],
        }
      },
      components: {
          // 将组建加入组建库
          'my-header': httpVueLoader('./common/header.vue')
      },

      methods:{
          handleLikeClick(Number){
              if (this.isLiked) {
                  Number=Number-1;
              }else {
                  Number=Number+1;
              }
              let param = {number:Number,articleId:this.article.id}
              console.log(param)
              this.$http.post("/article/like/",param).then(res=>{
                  let {success,data} = res.data;
                  if (success){
                      if (this.isLiked) {
                          // 如果已经点赞，则执行取消点赞的逻辑
                          this.article.articleStarNum--; // 假设点赞数减少 1
                          this.isLiked = false;
                          // 可以在这里调用取消点赞的后端接口，更新数据库等操作
                      } else {
                          // 如果未点赞，则执行点赞的逻辑
                          this.article.articleStarNum++; // 假设点赞数增加 1
                          this.isLiked = true;
                          // 可以在这里调用点赞的后端接口，更新数据库等操作
                      }
                  }
              })
          },
          //删除评论
          deleteComment(id){
             this.$http.delete("/comment/delete/"+id).then(res=>{
                 let {success,data}=res.data;
                 if (success){
                     this.loadComment();
                 }
             })
          },

          //查询当前文章对应的内容
          loadComment(){
              //获取当前地址
              let href=location.href;
              let idLen="id=";
              //最后出现的索引
              let index=href.indexOf(idLen);
              if (index===-1){
                  alert("错误")
                  return;
              }
              let articleId = href.substring(index+idLen.length);
              this.$http.patch("/comment/"+articleId).then(res=>{

                  let {success,data}=res.data;
                  if (success){
                      this.comments=data;

                  }
              })
          },

          //发表评论
          savasubmit(){
              if(this.comment){

                  //获取当前地址
                  let href=location.href;
                  let idLen="id=";
                  //最后出现的索引
                  let index=href.indexOf(idLen);
                  if (index===-1){
                      alert("错误")
                      return;
                  }
                  let articleId = href.substring(index+idLen.length);
                  let param = {content:this.comment,articleId:articleId}
                  this.$http.post("/comment",param).then(res=>{
                      let {success,data}=res.data;
                      if (success){
                          //刷新评论
                          this.loadComment();
                          //清空评论
                          this.comment="";

                      }
                  })
              }else {
                  alert("不能空评")
              }
          },

          //查询相关文章
          aboutArticles(){
              //获取当前地址
              let href=location.href;
              let idLen="id=";
              //最后出现的索引
              let index=href.indexOf(idLen);
              if (index===-1){
                  alert("错误")
                  return;
              }
              let articleId = href.substring(index+idLen.length);
              this.$http.post("/article/aboutArticles/"+articleId).then(res=>{
                  let {success,data}=res.data;
                  //console.log(data)
                  if (success){
                      this.aboutArticlelist=data
                  }
              })
          },
          loadArticle(){
              //获取当前地址
              let href=location.href;
              let idLen="id=";
              //最后出现的索引
              let index=href.indexOf(idLen);
              if (index===-1){
                  alert("错误")
                  return;
              }
              let articleId = href.substring(index+idLen.length);
              this.$http.get("/article/"+articleId).then(res=>{
                  let {success,data}=res.data;
                  //console.log(data)
                  if (success){
                      this.article=data
                      //console.log(this.article.articleTypeEmp.typeName)
                  }
              })
          },
          //阅读量
          handyuedu(){
              //获取当前地址
              let href=location.href;
              let idLen="id=";
              //最后出现的索引
              let index=href.indexOf(idLen);
              if (index===-1){
                  alert("错误")
                  return;
              }
              let articleId = href.substring(index+idLen.length);
              console.log(articleId)
              this.$http.put("/article/yueDu/"+articleId).then(res=>{
                  let {success}=res.data;
                  if (success){

                  }
              })

          },
        },

      mounted() {
        this.loadArticle();
        this.aboutArticles();
        this.loadComment();
        this.handyuedu();
      }
    })
  </script>

</body>

</html>